import { getAssetsImages } from '@/utils'
import { defineComponent } from 'vue'
import styles from './designContent.module.less'

export default defineComponent({
  setup() {
    const courseList = [{
      path: 'image8.webp',
      title: '成长规划',
      msg:'没有规划的人生就像没有掌舵者的船，提早规划方能处变不惊 '
    },{
      path: 'image9.webp',
      title: '阅读课堂',
      msg:'阅读能力是孩子今后学习生活的成功关键'
    },{
      path: 'image10.webp',
      title: '素质教育',
      msg:'陶冶情操、提高素养，助力开发智力，促进学生全面发展。'
    },{
      path: 'image11.webp',
      title: '终身性学习',
      msg:'培养孩子适应不确定的能力，在不确定中发现机会并取胜的能力。'
    }]
    return () => (
      <div class={styles['designContent-layout']}>
        <p class={styles['designContent-text1']}>Curriculum system</p>
        <p class={styles['designContent-text2']}>课程体系</p>
        <div class={styles['designContent-list']}>
          {
            courseList.map((course,index) => {
              return <div class={styles['designContent-item']}>
                <img src={getAssetsImages(course.path)} class={styles['item-image']} alt="" />
                <div class={[styles['item-text1'],styles[`text-bg${index}`]]}>{ course.title}</div>
                <div class={styles['item-text2']}>{ course.msg }</div>
              </div>
            })
          }
        </div>
      </div>
    )
  }
})
